<template>
    <div class="bwl-list">
        <template v-if="list.length !== 0">
            <!-- 一个列表项 -->
            <van-row
                class="bwl-list-item"
                type="flex"
                justify="space-between"
                v-for="item in list"
                :key="item.id"
                @click="() => $router.push(`/bwl/${item.id}`)"
            >
                <van-col>
                    <h3>{{ item.task }}</h3>
                    <p>本金 {{ item.benjin }}，佣金 {{ item.yongjin }}</p>
                    <p>{{ new Date(item.create_time).toLocaleString() }}</p>
                </van-col>

                <van-col>
                    <van-button size="mini">本金</van-button>
                    <van-button size="mini">佣金</van-button>
                </van-col>
            </van-row>

            <van-row type="flex" justify="center">
                <van-button
                    plain
                    type="primary"
                    style="margin-top: 15px"
                    @click="onLoadMoreClicked"
                    v-if="list.length < total"
                    >加载更多</van-button
                >
                <p v-else>没有啦...</p>
            </van-row>
        </template>
        <template v-else>
            <div class="empty-list">
                <p>你的备忘录空空如也，去创建一个吧~</p>
                <van-button
                    type="primary"
                    @click="() => $router.push('/bwl/add')"
                    >新建</van-button
                >
            </div>
        </template>
    </div>
</template>

<script>
export default {
    created() {
        this.getList();
    },
    data() {
        return {
            list: [],
            pagenum: 1,
            pagesize: 2,
            total: 0,
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/bwls", {
                params: { pagenum: this.pagenum, pagesize: this.pagesize },
            });
            this.list.push(...res.data.list);
            this.total = res.data.total;
        },
        async onLoadMoreClicked() {
            this.pagenum++;
            this.getList();
        },
    },
};
</script>

<style lang="less">
.bwl-list {
    height: 100%;
    min-height: 100vh;
    background-color: #eee;
    padding-bottom: 88px;

    &-item {
        background-color: #fff;
        margin-top: 15px;
        border-radius: 8px;
        padding: 5px 15px;

        p {
            color: #999;
        }
    }

    .empty-list {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}
</style>
